<template>
	<view>
		<uNavbar title="确认订单"></uNavbar>
		<view class="module_box">
			<view class="address flex_ld" @click="goAddress">
				<view class="address_l flex_dq" v-if="addressInfo">
					<image src="../../static/icon/i_diz.png" mode="aspectFill"></image>
					<view class="dizhi flex_Z">
						<text>{{addressDetail}}</text>
						<text>{{addressInfo.name}} {{addressInfo.phone}}</text>
					</view>
				</view>
				<view class="address_l flex_dq" v-else>
					<image src="../../static/icon/i_diz.png" mode="aspectFill"></image>
					<text>请填写地址</text>
				</view>
				<uni-icons type="right" color="#A68A64" size="20"></uni-icons>
			</view>
			<view class="goods flex_Z">
				<view class="goods_box flex_dq">
					<view class="goods_l">
						<image :src="shopGoods.images" mode="aspectFill"></image>
					</view>
					<view class="goods_r flex_Z">
						<view class="goods_r_tit flex_ld">
							<text class="f30 c3">{{shopGoods.name}}</text>
							<text class="f30 c5 fw7">￥{{orderDetails.total_goods_price}}</text>
						</view>
						<view class="goods_r_tit flex_ld">
							<text class="f24 c6" v-if="shopGoods.title">{{shopGoods.title}}</text>
							<text class="f28 c6"> x{{ mallCacheInfo.numbers}}</text>
						</view>
					</view>
				</view>
				<view class="remarks flex_ld">
					<input type="text" placeholder="请输入备注" v-model.trim="remarksInfo" maxlength="100" />
					<uni-icons type="right" color="#999999" size="20"></uni-icons>
				</view>
			</view>
			<view>
				
				<view class="price flex_Z">
					<text>价格说明</text>
					<view class="price_box flex_ld">
						<text class=" c6">商品总价</text>
						<text class="f30 c3">￥{{orderDetails.total_goods_price}}</text>
					</view>
					<view class="price_box flex_ld" v-if="shopGoods.is_hold">
						<text class=" c6">权益优惠</text>
						<text class="c5 fw7">减￥{{ allm}}</text>
					</view>
					<view   v-if=" mallCacheInfo.type == 7 || this.mallCacheInfo.type == 8 ||this.mallCacheInfo.type == 9 ">
						<view class="price_box flex_ld" >
							<text class=" c6">权益优惠</text>
							<text class="c5 fw7">减￥{{ (reduce - orderDetails.pay_price).toFixed(2)}}</text>
						</view>
						<view class="price_box flex_ld">
							<text class=" c6">合计</text>
							<text class="f30 c3">￥{{orderDetails.pay_price}}</text>
						</view>
					</view>
					<view class="price_box flex_ld" v-else >
						<text class=" c6">合计</text>
						<text class="f30 c3">￥{{reduce}}</text>
					</view>
				</view>
				<view v-if="mallCacheInfo.type == 2 || mallCacheInfo.type == 4 || mallCacheInfo.type == 5 || mallCacheInfo.type == 7|| mallCacheInfo.type == 8 || mallCacheInfo.type == 9">
					<view class="interests flex_Z" v-if="discountDetail.length >0">
						<text>权益使用</text>
						<view class="interests_box flex_ld" v-for="(item,index) in discountDetail" :key="index"
							@click="changQuanyi(item)">
							<text class=" c6">{{item.name}}</text>
							<image :src="item.id ==ids ?xz:wxz" @click="clickCheckbox1" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="energy_box flex_ld"
					v-if="mallCacheInfo.type == 2 && this.ids == 0 || mallCacheInfo.type == 4 ">
					<text class="c6">获得宝箱充能点数</text>
					<text class="c3">{{reduce}}</text>
				</view>
				<view class="energy_box flex_ld" v-if="mallCacheInfo.type == 4">
					<text class="c6">获得DAO贡献</text>
					<text class="c3">{{orderDetails.dao_contribution}}</text>
				</view>
				<view class="energy_box flex_ld" v-if="mallCacheInfo.type == 5">
					<text class="c6">获得福合元宝 {{orderDetails.balance_hf}}</text>
				</view>


				<view class="interests flex_Z" v-if="mallCacheInfo.type != 5">
					<text>支付</text>
					<view class="interests_box flex_ld" v-if="display3">
						<text class=" c6">福合通宝</text>
						<image :src="pay3?xz:wxz" @click="clickCheckbox3" mode="aspectFill"></image>
					</view>
					<view class="interests_box flex_ld" v-if="display4">
						<text class=" c6">福合元宝</text>
						<image :src="pay4?xz:wxz" @click="clickCheckbox4" mode="aspectFill"></image>
					</view>
					<view class="interests_box flex_ld" v-if="display6">
						<text class=" c6">福合元宝+福合通宝</text>
						<image :src="pay6?xz:wxz" @click="clickCheckbox6" mode="aspectFill"></image>
					</view>
					<view class="interests_box flex_ld" v-if="display7">
						<text class=" c6">生态积分</text>
						<image :src="pay7?xz:wxz" @click="clickCheckbox7" mode="aspectFill"></image>
					</view>
				</view>

				<view class="interests flex_Z" v-if="mallCacheInfo.type == 5">
					<text>支付</text>
					<view class="interests_box flex_ld" v-if="display8 && open_xs">
						<text class=" c6">新生支付</text>
						<image :src="pay8?xz:wxz" @click="clickCheckbox8" mode="aspectFill"></image>
					</view>
					<view class="interests_box flex_ld" v-if="display9 && open_sd">
						<text class=" c6">杉德钱包</text>
						<image :src="pay9?xz:wxz" @click="clickCheckbox9" mode="aspectFill"></image>
					</view>
					<view class="tips flex_ld" v-if="!open_xs && !open_sd">
						<text>请先开通第三方钱包</text>
						<view class="tips_r flex_dq" @click="goWallet">
							<text>去查看</text>
							<uni-icons type="right" color="#A68A64" size="20"></uni-icons>
						</view>
					</view>
				</view>

				<view class="btn_now flex_ld" v-if="mallCacheInfo.type == 7 || mallCacheInfo.type == 8 || mallCacheInfo.type == 9">
					<view class="submit flex_Z">
						<view class="submit_l ">
							<text class="f28 c3">合计：</text>
							<text class="f30 c5">￥{{orderDetails.pay_price}}</text>
						</view>
						<view class="submit_l" >
							<text class="f28 c9">共减：</text>
							<text class="f28 c9 mars">￥{{ (reduce - orderDetails.pay_price).toFixed(2)}} </text>
						</view>
					</view>
					<view class="submit_btn flex_c">
						<text @click="yzOrder">提交订单</text>
					</view>
				</view>
				
				<view class="btn_now flex_ld" v-else >
					<view class="submit flex_Z">
						<view class="submit_l ">
							<text class="f28 c3">合计：</text>
							<text class="f30 c5">￥{{reduce}}</text>
						</view>
						<view class="submit_l " v-if="shopGoods.is_hold">
							<text class="f28 c9">共减：</text>
							<text class="f28 c9 mars">￥{{ allm}}</text>
						</view>
					</view>
					<view class="submit_btn flex_c">
						<text @click="yzOrder">提交订单</text>
					</view>
				</view>
			</view>
		</view>
		<view class="empty3"></view>

		<u-popup :show="keyboardShow" mode="center" @close="keyboardShow=false" closeable bgColor="transparent">
			<view class="pass_wrap">
				<view class="tit">
					请输入交易密码
				</view>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#555275" focus class="code_input"
					v-model="securityPwd" mode="line" dot></u-code-input>
				<view class="other_btnwrap">
					<view class="other_btn1" @click="keyboardShow=false,securityPwd=''">
						取消
					</view>
					<view class="other_btn2" @click="valChange()">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="jiazaiShow" mode="center" bgColor="transparent">
			<view class="zairu">
				<u-loadmore status="loading" color="#ffffff" iconColor="#ffffff" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import NP from 'number-precision'
	import {
		createOrderDetails,
		addressList,
		createOrder,
		orderCheck
	} from "../../api/shopp.js";
	import {
		memberBalance
	} from "../../api/index.js";
	export default {
		data() {
			return {
				ids: null,
				discountId: null, //折扣id
				sestype: "",
				remarksInfo: '', //备注
				reduce: 0, //合计
				hknumber: 0, //次数
				orderSn: '', //订单编号
				securityPwd: '', //安全密码
				addressDetail: '', //地址
				userPayType: '', //支付方式
				open_xs: false,
				open_sd: false,
				coupons1: true,
				coupons2: false,
				display3: false,
				display4: false,
				display6: false,
				display7: false,
				display8: false,
				display9: false,
				pay3: false,
				pay4: false,
				pay6: false,
				pay7: false,
				pay8: false,
				pay9: false,
				keyboardShow: false, //密码框
				jiazaiShow: false,
				xz: '../../static/icon/i_checkbox.png',
				wxz: '../../static/icon/i_checkbox1.png',
				mallCacheInfo: {},
				addressInfo: {},
				shopGoods: {},
				orderDetails: {},
				discountDetail: {}
			}
		},
		watch: {
			// 切换权益算合计
			ids(val) {
				console.log(val);
				if (val == 1) {
					let sssss = this.orderDetails.total_goods_price * this.orderDetails.goods_discount_proportion
					var result = sssss.toString().match(/^\d+(?:\.\d{0,2})?/)[0];
					this.reduce = result
				} else {
					let aaaa = this.orderDetails.total_goods_price
					var result = aaaa.toString().match(/^\d+(?:\.\d{0,2})?/)[0];
					this.reduce = result
				}
			}
		},
		computed: {
			// 减价
			allm() {
				if (this.mallCacheInfo.type == 2) {
					return NP.round((this.orderDetails.total_goods_price - this.reduce), 2)
				} else {
					return 0
				}
			},
			// 充能点
			chongneng() {
				console.log(this.ids);
				if (this.mallCacheInfo.type == 2) {
					if (this.ids == 0) {
						return ((this.shopGoods.present_price - this.shopGoods.cost_price) * this.mallCacheInfo.numbers)
							.toFixed(2)
					} else if (this.ids == 1) {
						if (this.reduce - this.shopGoods.cost_price > 0) {
							return (this.reduce - this.shopGoods.cost_price) * this.mallCacheInfo.numbers
						} else {
							return '0.00'
						}
					}
				} else {
					return 0
				}
			},
		},
		onLoad(e) {
			console.log(e);
			this.mallCacheInfo = uni.getStorageSync('mallCacheInfo')
			uni.getSystemInfo({
				success: (res) => {
					if (res.uniPlatform == "web") {
						this.sestype = "h5"
						console.log(this.sestype, )
					}
					if (res.uniPlatform == "app") {
						this.sestype = "app"
						console.log(this.sestype)
					}
				}
			});
			if (e.order_sn) {
				this.jiazaiShow = true
				this.orderSn = e.order_sn
				this.isCallback()
			}
			console.log(e);
		},
		onShow() {
			if(this.mallCacheInfo.type == 5){
				this.getuser()
			}
			this.requestParams = uni.getStorageSync('requestParams') || '';
			console.log(this.requestParams);
			if (this.requestParams.type == 1) {
				this.jiazaiShow = true
				this.orderSn = this.requestParams.order_sn
				this.isCallback()
			}

			if (uni.getStorageSync("changeAddress")) {
				console.log(this.addressInfo);
				this.addressInfo = uni.getStorageSync("changeAddress")
				this.addressDetail = this.addressInfo.province + this.addressInfo.city + this.addressInfo.area + this
					.addressInfo.address
				console.log('拿到选中地址，删除对应存储');
				uni.removeStorageSync("changeAddress")
			} else {
				this.initDetail()
			}
		},
		methods: {
			// 用户信息
			getuser() {
				memberBalance().then(res => {
					uni.hideLoading()
					console.log(res)
					if (res.code == 1) {
						this.open_xs = res.data.open_xs
						this.open_sd = res.data.open_sd
					}
				})
			},

			isCallback() {
				let that = this;
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let data = {
					order_sn: that.orderSn,
				}
				orderCheck(data).then(res => {
					console.log(res);
					uni.hideLoading()
					if (res.code == 1) {
						if (res.data.status == 1) {
							uni.$u.toast('支付成功');
							that.jiazaiShow = false
							setTimeout(function() {
								uni.redirectTo({
									url: '/pagesMy/mallCenter/paySuccess?type=' + '4'
								})
							}, 1500);
						} else {
							uni.$u.toast('订单创建失败，重连' + that.hknumber, +'次');
							that.hknumber += 1
							setTimeout(function() {
								that.judge()
							}, 1500);
						}
					} else {
						that.jiazaiShow = false
					}
				})
			},
			judge() {
				if (this.hknumber < 3) {
					this.jiazaiShow = true
					this.isCallback()
				} else {
					this.jiazaiShow = false
					uni.$u.toast('支付失败');
				}
			},
			initDetail() {
				let data = {
					shop_goods_id: this.mallCacheInfo.id,
					number: this.mallCacheInfo.numbers,
					address_id: '',
					space_id: this.mallCacheInfo.spaceId,
					shop_goods_sku_id: this.mallCacheInfo.hasoption ? this.mallCacheInfo.skuDetail.id : 0,
					newcomer_record_id:this.mallCacheInfo.record_id,
				}
				createOrderDetails(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.orderDetails = res.data
						this.shopGoods = res.data.shop_goods
						this.discountDetail = res.data.discount_data
						if (res.data.discount_data.length > 0) {
							this.ids = res.data.discount_data[0].id
							if (res.data.type == 2) {
								this.discountId = res.data.discount_data[0].space_data.id
							}
						} else {
							this.ids = 0
						}
						this.addressInfo = res.data.address_details
						if (this.addressInfo) {
							this.addressDetail = this.addressInfo.province + this.addressInfo.city + this.addressInfo.area + this.addressInfo.address
						}
						this.paytypes = res.data.pay_type
						// console.log(this.paytypes)
						console.log('默认第一个', this.paytypes[0]);
						if (this.paytypes) {
							if (!this.userPayType) {
								let defaults = this.paytypes[0];
								const name = `pay${defaults}`
								this[name] = true
								this.userPayType = defaults
							}
						}
						let display3 = this.paytypes.includes(3)
						let display4 = this.paytypes.includes(4);
						let display6 = this.paytypes.includes(6);
						let display7 = this.paytypes.includes(7);
						let display8 = this.paytypes.includes(8);
						let display9 = this.paytypes.includes(9);
						console.log("支付方式", display3, display4, display6)
						this.display3 = display3 ? true : false;
						this.display4 = display4 ? true : false;
						this.display6 = display6 ? true : false;
						this.display7 = display7 ? true : false;
						this.display8 = display8 ? true : false;
						this.display9 = display9 ? true : false;
					}
				})
			},
			// 权益使用选择
			clickCheckbox1() {
				this.coupons2 = false
				this.coupons1 = !this.coupons1
			},
			// 权益使用选择
			clickCheckbox2() {
				this.coupons1 = false
				this.coupons2 = !this.coupons2
			},
			// 福合通宝
			clickCheckbox3() {
				this.userPayType = 3
				this.pay3 = !this.pay3
				this.pay4 = false
				this.pay6 = false
				this.pay7 = false
			},
			// 福合元宝
			clickCheckbox4() {
				this.userPayType = 4
				this.pay3 = false
				this.pay4 = !this.pay4
				this.pay6 = false
				this.pay7 = false
			},
			// 组合支付选择
			clickCheckbox6() {
				this.userPayType = 6
				this.pay3 = false
				this.pay4 = false
				this.pay6 = !this.pay6
				this.pay7 = false
			},
			// 生态积分
			clickCheckbox7() {
				this.userPayType = 7
				this.pay3 = false
				this.pay4 = false
				this.pay6 = false
				this.pay7 = !this.pay7
			},
			// 新生支付
			clickCheckbox8() {
				this.userPayType = 8
				this.pay8 = !this.pay8
				this.pay9 = false
			},
			// 杉德支付
			clickCheckbox9() {
				this.userPayType = 9
				this.pay8 = false
				this.pay9 = !this.pay9
			},

			goAddress() {
				uni.navigateTo({
					url: '/pagesMy/shoppingCenter/addressList?status=' + true
				})
			},
			changQuanyi(item) {
				console.log(item);
				this.ids = item.id
				console.log(item.space_data.id);
				if (this.ids == 1) {
					this.discountId = item.space_data.id
				}
			},

			yzOrder() {
				console.log(11111111111);
				if (!this.addressInfo) {
					uni.$u.toast('地址不能为空');
					return;
				}
				if (this.pay3 || this.pay4 || this.pay6 || this.pay7 || this.pay8 || this.pay9) {
					console.log('支付方式', this.userPayType);
					console.log(this.userPayType);
					this.keyboardShow = true
				} else {
					uni.$u.toast('请选择支付方式');
				}
			},
			// 输入密码
			valChange() {
				if (this.securityPwd.length < 6) {
					uni.$u.toast("交易密码为6位")
				}
				if (this.securityPwd.length >= 6) {
					this.keyboardShow = false
					this.submitOrder()
				}
			},
			// 支付
			submitOrder() {
				if(this.mallCacheInfo.type == 7 || this.mallCacheInfo.type == 8 || this.mallCacheInfo.type == 9){
					this.discountId = this.mallCacheInfo.spaceId
				}
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let data = {
					shop_goods_id: this.mallCacheInfo.id,
					newcomer_record_id: this.mallCacheInfo.record_id,
					number: this.mallCacheInfo.numbers,
					address_id: this.addressInfo.id,
					space_id: this.discountId || '',
					pay_type: this.userPayType,
					message: this.remarksInfo,
					client: this.sestype,
					pay_password: this.securityPwd,
					equity_exchange_mode: this.ids,
					shop_goods_sku_id: this.mallCacheInfo.hasoption ? this.mallCacheInfo.skuDetail.id : 0,
				}
				createOrder(data).then(res => {
					uni.hideLoading()
					console.log(res);
					if (res.code == 1) {
						// console.log('类型-------------------',res.data.pay_type);
						if (res.data.pay_type != 9) {
							uni.$u.toast(res.msg);
							setTimeout(function() {
								uni.redirectTo({
									url: '/pagesMy/mallCenter/paySuccess?type=' + '4'
								})
							}, 1500);
						} else {
							// console.log('跳转',res.data.sd_url);
							// #ifdef APP
							plus.runtime.openURL(res.data.sd_url)
							// #endif
							// #ifdef H5
							window.location.href = res.data.sd_url
							// #endif
						}
					} else {
						uni.$u.toast(res.msg);
					}
					this.securityPwd = ''
				})
			},
			goWallet() {
				uni.navigateTo({
					url: '/pagesMy/mywallet/newmywallet'
				})
			}
		},
		onUnload() {
			// console.log('触发卸载');
			uni.removeStorageSync("mallCacheInfo")
			uni.removeStorageSync('requestParams')
		},
	}
</script>

<style scoped lang="scss">
	.module_box {
		width: 690rpx;
		margin: 0 auto;
	}

	.address {
		width: 100%;
		height: 100rpx;
		background: #F2F2F2;
		border-radius: 12rpx;
		margin-top: 10rpx;
		padding: 0 24rpx;
	}

	.address_l {
		font-size: 30rpx;
		color: #3D3D3D;
	}

	.address_l>image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.dizhi {
		width: 550rpx;
	}

	.dizhi>text:nth-child(1) {
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.goods {
		width: 690rpx;
		background: #F2F2F2;
		border-radius: 12rpx;
		margin: 24rpx 0;
		padding-bottom: 20rpx;
	}

	.goods_l {
		padding: 24rpx 24rpx 10rpx 24rpx;
	}

	.goods_l>image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 20rpx;
	}

	.goods_r {
		width: 460rpx;
		margin-left: 14rpx;
	}

	.goods_r_tit {
		margin-bottom: 10rpx;
	}

	.goods_r_tit>text:nth-child(1) {
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.remarks {
		width: 100%;
		padding: 10rpx 24rpx;
	}

	.remarks>input {
		width: 100%;
		font-size: 28rpx;
	}

	.price {
		width: 690rpx;
		background: #F2F2F2;
		border-radius: 12rpx;
	}

	.price>text {
		font-size: 32rpx;
		color: #333333;
		font-weight: 700;
		padding: 24rpx 24rpx 36rpx 24rpx;
	}

	.price_box {
		padding: 0 24rpx;
		margin-bottom: 36rpx;
		font-size: 28rpx;
	}

	.careful {
		width: 690rpx;
		margin: 30rpx auto;
		font-size: 26rpx;
		color: #FF4040;
	}

	.energy_box {
		width: 690rpx;
		background: #F2F2F2;
		border-radius: 12rpx;
		margin: 24rpx 0;
	}

	.energy_box>text {
		font-size: 28rpx;
		padding: 24rpx 24rpx 36rpx 24rpx;
	}

	.interests {
		width: 690rpx;
		background: #F2F2F2;
		border-radius: 12rpx;
		margin: 24rpx 0;
	}

	.interests>text {
		font-size: 32rpx;
		color: #333333;
		font-weight: 700;
		padding: 24rpx 24rpx 36rpx 24rpx;
	}

	.interests_box {
		padding: 0 24rpx;
		margin-bottom: 36rpx;
		font-size: 28rpx;
	}

	.interests_box>image {
		width: 36rpx;
		height: 36rpx;
	}

	.pay_box {
		width: 690rpx;
		height: 340rpx;
		background: #F2F2F2;
		border-radius: 12rpx;
	}

	.tips {
		width: 92%;
		margin: 0 auto;
		padding-bottom: 24rpx;
		font-size: 32rpx;
		color: #A68A64;
	}

	.btn_now {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 120rpx;
		background: #FCFCFB;
	}

	.submit {
		min-width: 280rpx;
		margin-left: 30rpx;
	}

	.submit_l {
		display: flex;
		align-items: center;
	}

	.mars {
		margin-left: 8rpx;
	}

	.submit_btn {
		width: 274rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 36rpx;
		margin-right: 30rpx;
	}

	.zairu {
		width: 690rpx;
		height: 100rpx;
	}

	.pass_wrap {
		width: 602rpx;
		height: 406rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		z-index: 998;

		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #262626;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}

		.code_input {
			margin: 0 auto;
		}

		.other_btnwrap {
			width: 522rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 50rpx;

			.other_btn1 {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid #A68A64;
				font-size: 28rpx;
				color: #A68A64;
				text-align: center;
				line-height: 72rpx;
			}

			.other_btn2 {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient(274deg, #AB8E68, #D7BA93);
				border-radius: 40rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}

		.u-code-input {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/deep/.u-code-input__item {
			width: 30px !important;
			height: 30px !important;
			margin-right: 14px !important;
		}

		/deep/.u-code-input__item>text {
			color: #fff !important;
		}
	}

	/deep/.u-code-input__item__line {
		background: #A68A64 !important;
	}
</style>